<template>
    <div class="Infoset">
        <div class="nickname">
            啦啦啦啦啦
        </div>
        <div class="progress">
            <x-progress :percent="60" :show-cancel="false"></x-progress>
        </div>
        <div class="info">
            <group>
                <popup-radio title="性别" :options="options2" v-model="option2" placeholder="保密">
                    <template slot="each-item" slot-scope="props">
                        <p style="padding: .2rem .1rem;font-size: .4rem">{{props.label}}</p>    
                    </template>        
                </popup-radio>
            </group>
            <group>
                <datetime title="生日" v-model="date" :min-year=1970 :max-year=2018 placeholder="保密"></datetime>    
            </group>  
            <group>
                <popup-picker title="身高" :data="list2" v-model="value2" placeholder="cm"></popup-picker>
            </group>
            <group>
                <popup-picker title="体重" :data="list3" v-model="value3" placeholder="kg"></popup-picker>
            </group>
            <group>
                <x-address  title="现居地" v-model="value4" :list="addressData"  placeholder="请选择地址"></x-address>
            </group>
            <group>
                <x-address  title="故乡" v-model="value5" :list="addressData"  placeholder="请选择地址"></x-address>
            </group>
            <group>
                <popup-picker title="学历" :data="list4" v-model="value6" placeholder="保密"></popup-picker>
            </group>
            <group>
                <popup-picker title="年收入" :data="list5" v-model="value7" placeholder="保密"></popup-picker>
            </group>
            <group>
                <popup-picker title="职业" :data="list6" v-model="value8" placeholder="保密"></popup-picker>
            </group>
            <group>
                <popup-picker title="行业" :data="list7" v-model="value9" placeholder="保密"></popup-picker>
            </group>
            <group>
                <x-textarea title="个性签名"  v-model="textarea" placeholder="写点什么" :show-counter="false" :rows="1" :max="200" autosize></x-textarea>
            </group>
        </div>
    </div>
</template>

<script>
import { XProgress, XInput, PopupPicker, PopupRadio,Group,Datetime,XAddress,ChinaAddressV4Data,XTextarea  } from 'vux'
import axios from 'axios'
export default {
    name: 'InfoSet',
    components: {
        XProgress,
        PopupPicker,
        PopupRadio,
        Group,
        Datetime,
        XAddress,
        XTextarea
    },
    data () {
        return {
            option2: '',
            options2: [{
                key: 1,
                value: '男'
            }, {
                key: 2,
                value: '女'
            }],
            date: '',
            list2: [[1, 2], [0,1,2,3,4,5,6,7,8,9], [0,1,2,3,4,5,6,7,8,9]],
            value2: [],
            list3: [[1,2,3,4,5,6,7,8,9], [0,1,2,3,4,5,6,7,8,9]],
            list4: [['小学','初中','高中','大专','本科','研究生','硕士','博士']],
            list5: [['5万以下','5~10万','10~50万','50~100万','100万以上']],
            list6: [[1]],
            list7: [['学生党','教育','卫生、医疗','生产制造业','金融业','互联网','电信、通信','软件、信息','党政军','房地产','公共服务','文体娱乐','科学研究','技术服务','批发和零售','运输、仓储','邮政、快递','住宿、餐饮','商务服务','生活服务','建筑业','采矿业','能源、水资源','农林牧渔','社会组织','国际组织','其它']],
            value3: [],
            value4: [],
            value5: [],
            value6: [],
            value7: [],
            value8: [],
            value9: [],
            addressData: ChinaAddressV4Data,
            textarea:''

        }
    }
}
</script>

<style lang="stylus" scoped>
.Infoset
    background-color: #fff
    padding-bottom: 2rem
    .nickname
        padding: .4rem .2rem
        box-sizing: border-box
        font-size: .4rem
    .progress
        padding: 0 .2rem .2rem
    .info
        box-sizing: border-box
        padding: 0 .2rem .2rem
</style>